<template>
  <div>
    <cusDialog ref="dialog" width="630px" title="设备人员" headCss="float:left;" confrimText="保存" @confrim="confrimHandler"
      @hideHandler="hideHandler">
      <cusTransfer :data="transferData" ref="transferRef" :titles="['待绑定人员', '已绑定人员']"></cusTransfer>
    </cusDialog>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { reqDeviceUserList, reqBindUser } from "@/api/business/device";
const router = useRouter();

const dialog = ref(null);

const machineCode = ref();

const show = (code) => {
  machineCode.value = code;
  getDeviceUserList();
  dialog.value.show = true;
};
const hideHandler = () => {
  transferRef.value.transVal = []
}
// 获取绑定列表
const getDeviceUserList = () => {
  reqDeviceUserList({
    machineCode: machineCode.value,
  }).then((res) => {
    if (res.code == 1) {
      let newArr = res.data.unbindingList.concat(res.data.bindingList);
      transferData.value = newArr.map((el) => {
        el.key = el.userId;
        el.label = el.username;
        return el;
      });
      res.data.bindingList.forEach((el) => {
        transferRef.value.transVal.push(el.userId);
      });
    }
  });
};

const transferData = ref([]);
const transferRef = ref(null);
const confrimHandler = () => {
  let userIdList = transferRef.value.transVal;
  reqBindUser({
    machineCode: machineCode.value,
    userIdList,
  }).then((res) => {
    if (res.code == 1) {
      ElMessage.success("操作成功");
      dialog.value.show = false;
    } else {
      ElMessage.info(res.msg);
    }
  });
};

defineExpose({ show });
</script>

<style lang="scss" scoped>
::v-deep .el-transfer {
  display: flex;
  align-items: center;
  justify-content: center;

  .el-button {
    margin: 5px 0 !important;
  }
}

::v-deep .el-transfer__buttons {
  display: flex;
  flex-direction: column;
}
</style>